<template>
  <div id="app" :class="[currentTheme]">
    <div class="theme-toggle">
      <button @click="toggleTheme" :title="themeNames[currentTheme]">
        {{ themeIcons[currentTheme] }}
      </button>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      currentTheme: 'light',
      themes: ['light', 'dark', 'sunset', 'ocean', 'forest'],
      themeNames: {
        light: '切换到深色模式',
        dark: '切换到日落模式',
        sunset: '切换到海洋模式',
        ocean: '切换到森林模式',
        forest: '切换到浅色模式'
      },
      themeIcons: {
        light: '🌙',
        dark: '🌅',
        sunset: '🌊',
        ocean: '🌲',
        forest: '🌞'
      }
    }
  },
  created() {
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme && this.themes.includes(savedTheme)) {
      this.currentTheme = savedTheme
    }
  },
  methods: {
    toggleTheme() {
      const currentIndex = this.themes.indexOf(this.currentTheme)
      const nextIndex = (currentIndex + 1) % this.themes.length
      this.currentTheme = this.themes[nextIndex]
      localStorage.setItem('theme', this.currentTheme)
    }
  }
}
</script>

<style>
:root {
  --light-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --light-text: #2c3e50;
  --light-border: #ddd;
  --light-hover: rgba(0, 0, 0, 0.05);

  --dark-bg: linear-gradient(to bottom, #434343 0%, #000000 100%), linear-gradient(to right, #141e30 0%, #243b55 100%);
  --dark-text: #ffffff;
  --dark-border: #444;
  --dark-hover: rgba(255, 255, 255, 0.1);

  --sunset-bg: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 50%, #ffd1ff 100%), linear-gradient(135deg, #ffc3a0 0%, #ffafbd 100%);
  --sunset-text: #4a3636;
  --sunset-border: #ffb4b4;
  --sunset-hover: rgba(255, 154, 158, 0.2);

  --ocean-bg: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%), linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  --ocean-text: #1a365d;
  --ocean-border: #8bb3e6;
  --ocean-hover: rgba(161, 196, 253, 0.2);

  --forest-bg: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%), linear-gradient(to right, #00b09b 0%, #96c93d 100%);
  --forest-text: #2c4a1d;
  --forest-border: #b3e6b5;
  --forest-hover: rgba(212, 252, 121, 0.2);
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  min-height: 100vh;
  transition: all 0.5s ease;
}

#app.light {
  background: var(--light-bg);
  color: var(--light-text);
}

#app.dark {
  background: var(--dark-bg);
  color: var(--dark-text);
}

#app.sunset {
  background: var(--sunset-bg);
  color: var(--sunset-text);
}

#app.ocean {
  background: var(--ocean-bg);
  color: var(--ocean-text);
}

#app.forest {
  background: var(--forest-bg);
  color: var(--forest-text);
}

.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.theme-toggle button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.light .theme-toggle button:hover { background-color: var(--light-hover); }
.dark .theme-toggle button:hover { background-color: var(--dark-hover); }
.sunset .theme-toggle button:hover { background-color: var(--sunset-hover); }
.ocean .theme-toggle button:hover { background-color: var(--ocean-hover); }
.forest .theme-toggle button:hover { background-color: var(--forest-hover); }
</style>
